<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="__PUBLIC__/Home/css/xianqingye.css">
</head>
<body>
<div class="main_box">
    <!--头部-->
    <div class="header">
        <!--头部右边字    -->
        <div class="header_rignt">
            <ul>
                <li><a href="#">登录/注册</a></li>
                <li><a href="#">订单</a></li>
                <li><a href="#">收藏</a></li>
                <li><a href="#">帮助中心</a></li>
            </ul>
        </div>
    </div>
    <!--导航栏部分-->
    <div class="nav">
        <!--logo部分-->
        <div class="nav_logo">
            <div class="nav_logo_tu">
            </div>

        </div>
        <!--导航中间部分-->
        <div class="nav_center">
            <ul>
                <li><a href="#" class="nav_center_active">首页</a></li>
                <li><a href="#">男鞋</a></li>
                <li><a href="#">女鞋</a></li>
                <li><a href="#">私人订制</a></li>
                <li><a href="#">WanXie APP</a></li>
            </ul>
        </div>
        <!--右边搜索栏-->
        <div class="nav_right">
            <form>
                <div class="header_rignt_box">
                    <input type="text"   style="width: 41.65%; border:0.031em solid #c53e3b  " >
                    <input  type="submit"  value="搜索"
                            style="width: 11.74%;   font-size: 0.43em; background-color: #ce3d3a;color: white;border:0.031em solid #c53e3b;
                           margin-left: -2%; border-radius: 0.062em;">
                </div>
            </form>
        </div>
    </div>
    <div class="daohanwenzi">
        <span>男鞋 > 篮球鞋 > KYRIE 4 EP</span>
    </div>
    <div class="xqbox">
        <div class="xqbox_fourtic">
            <ul>
                <li class="active_boder">
                    <img src="__PUBLIC__/Home/images/xqye_06.png" style="width: 100%">
                </li>
                <li style="margin-top: 1em">
                    <img src="__PUBLIC__/Home/images/xqye_10.png" style="width: 100%">
                </li>
                <li style="margin-top:1em">
                    <img src="__PUBLIC__/Home/images/xqye_13.png" style="width: 100%">
                </li>
                <li style="margin-top:1em">
                    <img src="__PUBLIC__/Home/images/xqye_15.png" style="width: 100%">
                </li>
                <li style="margin-top: 1em">
                    <img src="__PUBLIC__/Home/images/xqye_18.png" style="width: 100%">
                </li>

            </ul>

        </div>
        <div class="xqbox_center">
            <img src="__PUBLIC__/Home/images/xqye_06.png" width="100%">

        </div>
        <div class="xqbox_right">
                <span class="ky">KYRIE 4 EP</span><br>
                <span class="qx">男子篮球鞋</span><br>
                 <span class="qian">¥899</span><br>
        <div>
            <span class="myf">免运费</span><span style="font-size: 0.38rem;	color: #666666; display: block ;  ">免运费</span>
        </div>
            <div style="margin-top: 0.5em;">
                <span class="myf">满减</span><span style="font-size: 0.38rem;	color: #666666; display: block ;  ">满699减20</span>
            </div>
            <div style="margin-top: 0.5em">
                <span class="myf">满减</span><span style="font-size: 0.38rem;	color: #666666; display: block ; ">满1699减120</span>
            </div>
       <div style="color: #666666; font-size: 0.5em;margin-top: 1em;padding-left: 5%"><span>颜色</span></div>
            <div style="    width: 8%;
    height: 1.5em;
    border: 1px solid #ce3d3a;
    margin-left: 4%;
    text-align: center;
    font-size: 0.65em;
    margin-top: 0.3em;">黑色
            </div>
            <div style="width: 8%;
    border: 1px solid #ce3d3a;
    margin-left: 4%;
    text-align: center;
    color: #0f0f0f;
    float: left;
    font-size: 0.5em;
    float: left;
    margin-top: 1em;
    height: 2em;
    line-height: 2em;"><span>尺码</span></div>
           <div class="chima_box">
               <div style="
               width: 7%;border: 1px solid #ce3d3a;margin-left: 4%;text-align: center;color: #0f0f0f;float: left;font-size: 0.5em;
    float: left;
    margin-top: 1em;
    height: 2em;
    line-height: 2em;">
               40
           </div>
               <div style="
               width: 8%;
    border: 1px solid black;
    margin-left: 4%;
    text-align: center;
    color: #0f0f0f;
    float: left;
    font-size: 0.5em;
    margin-top: 1em;
    height: 2em;
    line-height: 2em;">
                   41
               </div>
               <div style="
                       width: 8%;
    border: 1px solid black;
    margin-left: 4%;
    text-align: center;
    color: #0f0f0f;
    float: left;
    font-size: 0.5em;
    margin-top:1em;
    height: 2em;
    line-height: 2em;">
                   42
               </div>
               <div style="
                       width: 8%;
    border: 1px solid black;
    margin-left: 4%;
    text-align: center;
    color: #0f0f0f;
    float: left;
    font-size: 0.5em;
    margin-top: 1em;
    height: 2em;
    line-height: 2em;">
                   43
               </div>
               <div style="        width: 8%;
    border: 1px solid black;
    margin-left: 4%;
    text-align: center;
    color: #0f0f0f;
    float: left;
    font-size: 0.5em;
    margin-top: 1em;
    height: 2em;
    line-height: 2em;">
                   44
               </div></div>
            <div style="color: #666666; font-size: 0.5em;margin-top: 4.5em;padding-left: 5%;height: 3em; line-height: 3em;"><span style="display:block;float: left;">数量</span>
            <div style="height: 3em;width:30%;float: left;margin-left: 5%" >
                <div class="jiahao" style="height: 3em;width: 20%;border: 1px solid silver; float: left;line-height: 3em;text-align: center;font-size: 0.5em">+</div>
                <div class="shuliang" style="height: 3em;width: 53%;border: 1px solid silver; float: left;line-height: 3em;text-align: center;font-size: 0.5em">1</div>
                <div class="jianhao" style="height: 3em;width: 20%;border: 1px solid silver; float: left;line-height: 2em;text-align: center;font-size: 0.5em">_</div>
            </div>
            </div>
            <div style="color: #666666; font-size: 0.5em;margin-top: 2em;padding-left: 5%;height: 3em; line-height: 3em;"><span style="display:block;float: left;">收藏</span>
                <div style="height: 0.5em; width: 4% ;float: left;margin-left: 3%;padding-top: 0.2em">
                    <img src="__PUBLIC__/Home/images/xq_20.png" style="width: 100%">
                </div>
                <div style="color: #666666; font-size: 0.5em;margin-top: 2em;padding-left: 5%;height: 3em; line-height: 3em;"><span style="display:block;float: left;margin-left: 5%">收藏</span>
                    <div style="height: 0.5em; width: 4% ;float: left;margin-left: 3%;padding-top: 0.2em">
                        <img src="__PUBLIC__/Home/images/xq_23.png" style="width: 100%">
                    </div>
        </div>
              <div style="width: 30%;height: 1.8em ;border: 1px solid  red;text-align: center;line-height: 1.8em;color: red;float: left;margin-top: 0.8em">
                  立即购买
              </div>
                <div style="width: 30%;height: 1.8em ;border: 1px solid black;text-align: center;line-height: 1.8em;color: red;float: left;margin-left: 5%;margin-top: 0.8em">
                    加入购物车
                </div>
    </div>

    </div>
</div>
    <div class="tupian_contain">
        <div class="tupian_contain_top">
            <div class="sp_contain">
            <a>商品详情</a>
        </div>
            <div class="sp_yhpj">
                <a>用户评价</a>
            </div>
        </div>
        <div class="tu_pic"></div>
        <div class="tu_tel">用户评论</div>
  <div class="pic_bottom">
      <div class="pic_bottom_top">
          <div class="cnxf">
          <a>猜你喜欢</a>
      </div></div>
      <div class="pic_bottom_bottom">
          <ul>
              <li>
              <img src="__PUBLIC__/Home/images/banner_12.png" style="width: 100%">
                  <span class="ui_yingwein"><a href="#">Nike AirVaporMax  Flyknit</a></span><br>
                  <span class="ul_wenzi"><a href="#">男子运动鞋</a></span><br>
                  <span class="ul_money"><a href="#">¥1599 </a></span><br>
          </li>
              <li>
                  <img src="__PUBLIC__/Home/images/banner_12.png" style="width: 100%">
                  <span class="ui_yingwein"><a href="#">Nike AirVaporMax  Flyknit</a></span><br>
                  <span class="ul_wenzi"><a href="#">男子运动鞋</a></span><br>
                  <span class="ul_money"><a href="#">¥1599 </a></span><br>
              </li>
          </ul>
      </div>
  </div>
    </div>



    <div class="footer">
        <div class="footer_left"></div>
        <div class="footer_rignt">
            <div class="footer_rignt_top">
                <ul>
                    <li><a>电子礼品卡</a></li>
                    <li><a>附近商店</a></li>
                    <li><a>订阅NIKE会员</a></li>
                    <li><a>网站反馈</a></li>
                </ul>
                <ul style="margin-left: 6.56%;">
                    <li><a>获取帮助</a></li>
                    <li><a>订单状态</a></li>
                    <li><a>培训方式</a></li>
                    <li><a>退换货</a></li>
                    <li><a>付款选项</a></li>
                    <li><a>联系我们</a></li>
                </ul>
                <ul style="margin-left: 8.58%;">
                    <li><a>关于</a></li>
                    <li><a>新闻</a></li>
                    <li><a>投资者</a></li>
                    <li><a>招纳贤士</a></li>
                    <li><a>新品预览</a></li>
                </ul>
                <div class="footer_rignt_top_ewm">
                    <span style="color: white; font-size: 0.8em; font-weight: bold "><a>下载WANXIE官方APP</a></span>
                    <span style="color: white; font-size: 0.5em ; display: block; margin-left: 18%; margin-top: 0.5em">进一步了解我们</span>
                    <div style="height: 3.59em; width:60% ;display: block; margin-top: 0.3em; margin-left: 13%;  ">
                        <img src="__PUBLIC__/Home/images/footwr_03.png" width="100%">
                    </div>

                </div>
            </div>
        </div>

    </div>

</div>
</div>
<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.js"></script>
<script>
    $(function(){

        $(".nav_center>ul>li>a").mouseenter(function(){
            $(this).addClass("nav_center_active");
        });
        $(".nav_center>ul>li>a").mouseleave(function(){
            $(this).removeClass("nav_center_active");
        });
//        $(".xqbox_fourtic>ul>li").click(function(){
//            $index=$(this).index();
//            $(".xqbox_center>img").
//
//
//
//        });
        $(".xqbox_fourtic>ul>li").click(function(){
           $(this).addClass("active_boder").siblings().removeClass("active_boder");
          var sr=  $(this).children("img").attr("src");
          $(".xqbox_center>img").attr("src",sr);

//           $sr= $(this).children().attr("src");
        });

        $(".chima_box>div").click(function(){
//           var index= $(this).index();
            $(this).css("border","1px solid red").siblings().css("border","1px solid black");
        });
          $(".sp_contain").click(function(){
              $(this).css("background-color","red").next().css("background-color","white");
              $(".tu_pic").show().next().hide();

          });
           $(".sp_yhpj").click(function(){
               $(this).css("background-color","red").siblings().css("background-color","white");
               $(".tu_tel").show();
               $(".tu_pic").hide();
           });

  $(".jiahao").click(function(){
       var va=$(".shuliang").html();
       var num=parseInt(va)+1;
      $(".shuliang").html(num);

  });
        $(".jianhao").click(function(){
            var va=$(".shuliang").html();
            if (va<1){
              return
            }
            else{
                var num=parseInt(va)-1;
                $(".shuliang").html(num);
            }

        })
    })


</script>
</body>
</html>